<style>
    table.table-form-title{margin:20px auto 0;}
    table.table-form-title td{text-align: center;border-bottom:0 !important;}
    table.table{width:90%;margin:0 auto;}
    table.table-form-attach{margin-bottom:100px;}
</style>
<div style="margin:0 auto;">
    <table class="table-form-title table" style="margin-top:20px;">
        <tr>
            <td></td>
            <th  colspan="2" readonly=true  style="text-align: center;font-size: 25px">${config.getKey("COMPANY_NAME")}</th>
            <td> <@f.tableselect checked=false keyId="department" keyName="department" url="/bpm/project/list"
                name="projectDept" value="${bpmForm.projectDept}" labelValue="${bpmForm.projectDept}" boxTitle="项目档案" tableInfo = "[{field:'name',title:'项目档案编号'},
                {field:'projectName',title:'项目名称'}, {field:'department',title:'项目所属部门'},{field:'ceoName',title:'项目经理'},
                {field:'contractFirst',title:'委托单位'},{field:'createTime',title:'创建时间'}]" placeholder="项目归属部门" />
            </td>
            <td ><span  style="text-align: center;font-size: 20px;font-weight:bold">${bpmTaskFrom.fromName}</span></td>
            <td >
                <@f.tableselect readonly=true  name="projectAdmin" value="${bpmForm.projectAdmin}" labelValue="${bpmForm.projectAdmin}" boxTitle="用户信息" url="bpm/manager/list" keyId="name" keyName="name" checked=false
                tableInfo = "[{field:'username',title:'账号'},{field:'name',title:'姓名',query: true},{field:'compName',title:'归属公司'},
                {field:'deptName',title:'归属机构'},{field:'mobile',title:'手机号码'},
                {field:'status',title:'状态',dict:'sys_user_show_hide',query: true}]"  placeholder="发起人" />
            </td>
            </td>
        </tr>
        <tr>
            <td width="15%">NO:</td>
            <td width="20%"><span> 发起时间：</span></td>
            <td width="15%">
                <@f.input readonly=true  name="createTime" value="${bpmForm.createTime?string('yyyy-MM-dd')}" type="date" dataType="date" dataFormat="yyyy-MM-dd"
                placeholder="发起日期"  butClass="fa fa-calendar-plus-o" required=true />
            </td>
            <td width="15%"></td>
            <td width="15%"><span>支付日期：：</span></td>
            <td class="text-left">
                <@f.input readonly=true  name="payTime" value="${bpmForm.payTime?string('yyyy-MM-dd')}" type="date" dataType="date" dataFormat="yyyy-MM-dd"
                placeholder="请选择时间"  butClass="fa fa-calendar-plus-o" required=true />
            </td>
        </tr>
    </table>

    <table class="table-form-body table table-hover table-bordered">
        <thead>
        <tr>
            <td colspan="40" rowspan="1">
                <button name="btn-insert" type="button" class="btn btn-primary btn-rounded btn-sm">插入行</button>
                <button name="btn-insert" type="button" class="btn btn-primary btn-rounded btn-sm">插入到账金额</button>
                <button name="btn-insert" type="button" class="btn btn-primary btn-rounded btn-sm">插入三联单号</button>
                <button name="btn-copy" type="button" class="btn btn-primary btn-rounded btn-sm">复制行</button>
                <button name="btn-del" type="button" class="btn btn-primary btn-rounded btn-sm">删除行</button>
                <button name="btn-del-all" type="button" class="btn btn-primary btn-rounded btn-sm">删除全部</button>
                <button name="btn-import" type="button" class="btn btn-primary btn-rounded btn-sm">导入数据</button>
            </td>
        </tr>
        <tr>
            <th colspan="2" rowspan="2">序号</th>
            <th colspan="6" rowspan="2">项目名称</th>
            <th colspan="4" rowspan="2">合同额（元） ①</th>
            <th colspan="4" rowspan="2">开票金额（元） ②</th>
            <th colspan="4" rowspan="2">付款单位</th>
            <th colspan="3" rowspan="2">到账金额（元） ③</th>
            <th colspan="4" rowspan="2">回单号</th>
            <th colspan="8" rowspan="1">应交各种规费</th>
            <th colspan="4" rowspan="2">可结算金额（元） ⑤=③-④</th>
            <th colspan="4" rowspan="2">提供发票金额（元） ⑥=②-④</th>
        </tr>
        <tr>
            <th colspan="4" rowspan="1">金 额（元） ④</th>
            <th colspan="4" rowspan="1">三联单号</th>
        </tr>
        </thead>
        <tbody name="items">
        <tr data-id="">
            <td colspan="2" rowspan="2">1</td>
            <td colspan="6" rowspan="2"><@f.input readonly=true  name="projectName" value="${bpmForm.projectName}" placeholder="" required=true/></td>
            <td colspan="4" rowspan="2"><@f.input readonly=true  name="contractMoney" value="${bpmForm.contractMoney}" placeholder="0.00" required=true/></td>
            <td colspan="4" rowspan="2"><@f.input readonly=true  name="invoinceAmount" value="${bpmForm.invoinceAmount}" placeholder="0.00" required=true/></td>
            <td colspan="4" rowspan="2"><@f.input readonly=true  name="company" value="${bpmForm.company}" placeholder="" required=true/></td>
            <td colspan="3" rowspan="2"><@f.input readonly=true  name="amountReceived" value="${bpmForm.amountReceived}" placeholder="0.00" required=true/></td>
            <td colspan="4" rowspan="2"><@f.input readonly=true  name="receiptNo" value="${bpmForm.receiptNo}" placeholder="" required=true/></td>
            <td colspan="4" rowspan="1"><@f.input readonly=true  name="money" value="${bpmForm.money}" placeholder="0.00" required=true/></td>
            <td colspan="4" rowspan="2"><@f.input readonly=true  name="sanlinaId" value="${bpmForm.sanlinaId}" placeholder="" required=true/></td>
            <td colspan="4" rowspan="2"><@f.input readonly=true  name="settleableAmount" value="${bpmForm.settleableAmount}" placeholder="0.00" required=true/></td>
            <td colspan="4" rowspan="2"><@f.input readonly=true  name="provideInvoiceAmount" value="${bpmForm.provideInvoiceAmount}" placeholder="0.00" required=true/></td>
        </tr>
        </tbody>
    </table>
    <table class="table-form-head table table-hover table-bordered">
        <tr data-id="">
            <th width="114px">合计</th>
            <td width="92px"><@f.input readonly=true   name="total" value="${bpmForm.total}" placeholder="0.00" required=true/></td>
            <td width="93px"><@f.input readonly=true   name="total2" value="${bpmForm.total2}" placeholder="0.00" required=true/></td>
            <td width="82px"></td>
            <td width="92px"><@f.input readonly=true   name="total3" value="${bpmForm.total3}" placeholder="0.00" required=true/></td>
            <td width="83px"></td>
            <td width="92px"><@f.input readonly=true   name="total4" value="${bpmForm.total4}" placeholder="0.00" required=true/></td>
            <td  width="82px"></td>
            <td ><@f.input  name="total5" readonly=true  value="${bpmForm.total5}" placeholder="0.00" required=true/></td>
            <td ><@f.input  name="total6" readonly=true  value="${bpmForm.total6}" placeholder="0.00" required=true/></td>
        </tr>
    </table>
    <table class="table-form-title table" style="margin-top:20px;">
        <tr>
            <td width="15%">公司主管领导：</td>
            <td width="15%"></td>
            <td width="10%">部门负责人：</td>
            <td width="10%"></td>
            <td width="15%">财务签字：</td>
            <td width="10%"></td>
            <td width="10%">经办人：</td>
            <td >
                <@f.tableselect name="agent" readonly=true  value="${bpmForm.agent}" labelValue="${bpmForm.agent}" boxTitle="用户信息" url="bpm/manager/list" keyId="name" keyName="name" checked=false
                tableInfo = "[{field:'username',title:'账号'},{field:'name',title:'姓名',query: true},{field:'compName',title:'归属公司'},
                {field:'deptName',title:'归属机构'},{field:'mobile',title:'手机号码'},
                {field:'status',title:'状态',dict:'sys_user_show_hide',query: true}]"  placeholder="发起人" />
            </td>
        </tr>
    </table>
    <table class="table-form-title table" style="margin-top:30px;">
        <tr>
            <th  colspan="2" style="text-align: center;font-size: 25px">支付明细</th>
        </tr>
    </table>
    <table class="table-form-body table table-hover table-bordered">
        <thead>
        <tr>
            <td colspan="40" rowspan="1">
                <button name="btn-insert" type="button" class="btn btn-primary btn-rounded btn-sm">插入行</button>
                <button name="btn-copy" type="button" class="btn btn-primary btn-rounded btn-sm">复制行</button>
                <button name="btn-del" type="button" class="btn btn-primary btn-rounded btn-sm">删除行</button>
                <button name="btn-del-all" type="button" class="btn btn-primary btn-rounded btn-sm">删除全部</button>
                <button name="btn-import" type="button" class="btn btn-primary btn-rounded btn-sm">导入数据</button>
            </td>
        </tr>
        <tr>
            <th colspan="2" rowspan="1">序号</th>
            <th colspan="2" rowspan="1">汇款单位/个人</th>
            <th colspan="2" rowspan="1">开户行</th>
            <th colspan="2" rowspan="1">银行账号</th>
            <th colspan="2" rowspan="1">应付金额</th>
            <th colspan="2" rowspan="1">已付金额（冲备用金）</th>
            <th colspan="2" rowspan="1">实付金额</th>
            <th colspan="2" rowspan="1">未付金额</th>
            <th colspan="2" rowspan="1">备注</th>
        </tr>
        </thead>
        <tbody name="items">
        <tr data-id="">
            <td colspan="2" rowspan="1">1</td>
            <td colspan="2" rowspan="1"><@f.input readonly=true  name="remittanceUnit" value="${bpmForm.remittanceUnit}" placeholder="" required=true/></td>
            <td colspan="2" rowspan="1"><@f.input readonly=true  name="bankOfDeposit" value="${bpmForm.bankOfDeposit}" placeholder="0.00" required=true/></td>
            <td colspan="2" rowspan="1"><@f.input readonly=true  name="bankAccount" value="${bpmForm.bankAccount}" placeholder="0.00" required=true/></td>
            <td colspan="2" rowspan="1"><@f.input readonly=true  name="amountPayable" value="${bpmForm.amountPayable}" placeholder="" required=true/></td>
            <td colspan="2" rowspan="1"><@f.input readonly=true  name="amountPaid" value="${bpmForm.amountPaid}" placeholder="0.00" required=true/></td>
            <td colspan="2" rowspan="1"><@f.input readonly=true  name="amountActuallyPaid" value="${bpmForm.amountActuallyPaid}" placeholder="" required=true/></td>
            <td colspan="2" rowspan="1"><@f.input readonly=true  name="outstandingAmount" value="${bpmForm.outstandingAmount}" placeholder="0.00" required=true/></td>
            <td colspan="2" rowspan="1"><@f.input readonly=true  name="remark" value="${bpmForm.remark}" placeholder="" required=true/></td>
        </tr>
        </tbody>
    </table>
    <table class="table-form-head table table-hover table-bordered">
        <tr data-id="">
            <th width="144px">合计</th>
            <td width="110px"></td>
            <td width="110px"><@f.input readonly=true  name="total7" value="${bpmForm.total7}" placeholder="" required=true/></td>
            <td width="110px"><@f.input readonly=true  name="total8" value="${bpmForm.total8}" placeholder="" required=true/></td>
            <td width="110px"><@f.input readonly=true  name="total9" value="${bpmForm.total9}" placeholder="" required=true/></td>
            <td width="110px"><@f.input readonly=true  name="total10" value="${bpmForm.total10}" placeholder="" required=true/></td>
            <td width="111px"><@f.input readonly=true  name="total11" value="${bpmForm.total11}" placeholder="" required=true/></td>
            <td width="110px"></td>
        </tr>
    </table>



</div>
<script type="text/javascript">
    function showFileDlg() {
        $("#file").click();
    }
    $("#file").change(function () {
        uploadBidedNotice();
    });
    function uploadBidedNotice() {
        var oFiles = document.getElementById("file").files;
        console.log(oFiles);
        var formdata = new FormData();
        formdata.append("file", oFiles[0]);
        opt.common.sendAjax({
            url: prefix + "/uploadFile",
            data: formdata,
            type: "POST",
            processData: false,
            contentType: false,
            success: function(result) {
                console.log(result);
                $("input[name=bidedNoticeName]").val(oFiles[0].name);
                $("input[name=bidedNoticeUrl]").val(baseURL + result.msg);
                $("a[name=bidedNoticeBox]").html(oFiles[0].name).attr("href",baseURL + result.msg);
                console.log("----------------------");
            }
        })
    }
    function tableCallback(id, event, index, layero, nodes){
        console.log("aaaaaaaaaaaaaaa")
        if(id == "launchName"){
            console.log("弹出表格选择===>>>>: id:" + id + "  event:" + event + " index:" + index + "  layero:"+ layero + " nodes:" + JSON.stringify(nodes));
            console.log(nodes.table[0]);
            var data = nodes.table[0];
            console.log(data)

            console.log(data.ceoName);
            $("input[name=launchDepartment]").val(data.compName);
            //  $("input[name=projectName]").val(data.projectName);
            // // $("input[name=ceoName]").val(data.ceoName);
            //  $("input[name=projectAdmin]").val(data.ceoName);
            //  $("input[name=clientCompany]").val(data.contractFirst);
            //  $("input[name=projectDept]").val(data.department);
        }
    }


    $("button[name=btn-insert]").click(function () {
        var target = $(this).closest("table").find("tbody");
        var index = target.children().length + 1;
        var tpl = $(target.children().get(0)).prop("outerHTML");
        tpl = tpl.replaceAll("1", index);
        target.append(tpl);
    });
    $("button[name=btn-del]").click(function () {
        var target = $(this).closest("table").find("tbody");
        var index = target.children().length - 1;
        if(index>0){
            target.children().get(index).remove();
        }
    });
    $("button[name=btn-del-all]").click(function () {
        var target = $(this).closest("table").find("tbody");
        var index = target.children().length - 1;
        for(var i=index; i>0; i--){
            target.children().get(i).remove();
        }
    });
</script>